<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="${basePath}/static/css/theme-chalk.css">
    <link rel="stylesheet" href="${basePath}/static/css/elementss.css"/>
    <link rel="stylesheet" href="${basePath}/static/css/style.css">
    <!-- 先引入 Vue -->
    <script src="${basePath}/static/js/lib/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="${basePath}/static/js/lib/element-ui.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/lib/jquery-1.11.0.js"></script>
    <script type="text/javascript" >
        var BASE = '${basePath}';
        var socket;
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
            socket = new WebSocket("${basePath}/websocket".replace("http","ws"));
            //打开事件
            socket.onopen = function() {
                console.log("Socket 已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg);
                if(msg.data != "连接成功"){
                    alert(msg.data);
                    searchSubmit();
                }

                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                alert("Socket发生了错误");
                //此时可以尝试刷新页面
            }
            //离开页面时，关闭socket
            //jquery1.8中已经被废弃，3.0中已经移除
            // $(window).unload(function(){
            //     socket.close();
            //});
        }

    </script>
</head>
<body>
设备管理页面
<br>
<div align="center" style="padding-top: 300">
    <img src="<%=request.getContextPath()%>/static/images/scan.png" width="100" height="100"/>
</div>
<div id="app" class="returnMission-footer">
    <div class="returnMission-footer-nav clear">
        <div class="guanli l">   用户设备列表</div>
    </div>
    <el-table
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            style="width: 100%"
    >
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column
                type="index"
                label="序号"
                width="80"
                sortable
        >
        </el-table-column>
        <el-table-column
                prop="stUserName"
                label="用户名"
                width="160"
        >
        </el-table-column>
        <el-table-column
                prop="stName"
                label="姓名"
                width="160"
                show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
                prop="stDevNo"
                label="设备号"
                width="160"
        >
        </el-table-column>
        <el-table-column
                prop="stSystem"
                label="设备系统"
                width="250"
        >
        </el-table-column>
        <el-table-column
                prop="stVersion"
                label="系统版本"
                width="300"
        >
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleScanClick(scope.row)" type="text" size="small">二维码</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="w100 page">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchFormData.currentPage"
                :page-sizes="[10, 15, 20, 25, 30, 50, 100]"
                :page-size="searchFormData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="searchFormData.totalCount">
        </el-pagination>
    </div>

    <div>
        <el-dialog title="扫描二维码" :visible.sync="scanVisible" v-fous ref="dialog__wrapper" :modal="false">
            <div class="vertical box_center">
                <div class="transverse box_center el-body-mar" >
                    <img :src="scanImgSrc" width="300px" height="300px">
                </div>
                <div class="transverse box_center el-body-mar">
                    <input class="quxi el-body-butt" @click="scanVisible = false" type="button"
                           value="关闭"/>
                </div>
            </div>
        </el-dialog>
    </div>
</div>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/dev-mgr/dev-main.js"></script>
</body>
</html>